<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>IEEE-754 Floating Point representation explained</title>

    <link rel="stylesheet" href="./css/math.css" />
    <link rel="stylesheet" href="./css/bits.css" />
    <link rel="stylesheet" href="./css/dynks.css" />
    <link rel="stylesheet" href="./css/visualization.css" />
</head>

<body>

<div class="number-wrapper math">
    <input id="number-input" class="number-input" value="1234.5678" />

    <button class="toggle-details-button">toggle details</button>
</div>

<div class="visualization-wrapper">
    <div class="visualization-bits">

        <div class="bits-wrapper sign-wrapper">
            <em class="bits-wrapper-title"><span class="sign-title">sign</span>&nbsp;</em>
            <div class="bits">
                <span class="bit sign"></span>
            </div>

            <div class="math" >

                <span class="mrow">
                    <span class="mi">s</span>
                    <span class="mo">=</span>
                    <span class="msup">
                        <span class="mn">&minus;1</span><span class="mn sign-bit-0" data-ieee754-value="bSign">0</span>
                    </span>
                </span>
                <span class="mrow indented">
                    <span class="mi">s</span>
                    <span class="mo">=</span>
                    <span class="mn sign-bit-0" data-ieee754-value="signHtml">0</span>
                </span>
            </div>

        </div>
        <div class="bits-wrapper exponent-wrapper">
            <em class="bits-wrapper-title">exponent</em>
            <div class="bits">
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
                <span class="bit exponent"></span>
            </div>

            <div class="math" >

                <span class="mrow">
                    <span class="mi">e</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="exponentPowers"></span>
                </span>

                <span class="mrow indented">
                    <span class="mi">e</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="exponentPowersComputed"></span>
                </span>

                <span class="mrow indented">
                    <span class="mi">e</span>
                    <span class="mo">=</span>
                    <span class="mn" data-ieee754-value="exponent" id="exponent-dynks" data-dynks-min="0" data-dynks-max="2047" data-dynks-gap="2"></span>
                </span>

                <span class="mrow">
                    <span class="mi">p</span>
                    <span class="mo">=</span>
                    <span class="mi">e</span>
                    <span class="mo">&minus;</span>
                    <span class="mn">1023</span>
                </span>
                <span class="mrow indented">
                    <span class="mi">p</span>
                    <span class="mo">=</span>
                    <span class="mn" data-ieee754-value="exponentNormalized" id="exponent-normalized-dynks" data-dynks-min="-1023" data-dynks-max="1024" data-dynks-gap="2"></span>
                </span>

            </div>
        </div>
        <div class="bits-wrapper significand-wrapper">
            <em class="bits-wrapper-title">significand</em>
            <div class="bits">
                <span class="bit hidden"></span>

                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>

                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>

                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>

                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>

                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>
                <span class="bit significand"></span>

                <span class="bit significand"></span>
                <span class="bit significand"></span>

                <label for="point-slider" id="point-slider-label"></label>
                <input id="point-slider" class="point-slider" type="range" min="0" max="2047" step="1" />
            </div>

            <div class="math" >
                <span class="mrow">
                    <span class="mi">n</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="significandPowers"></span>
                </span>

                <span class="mrow indented">
                    <span class="mi">n</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="significandPowersFractions"></span>
                </span>


                <span class="mrow indented">
                    <span class="mi">n</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="significandPowersFractionsComputed"></span>
                </span>

                <span class="mrow indented">
                    <span class="mi">n</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="significandPowersComputed"></span>
                </span>

                <span class="mrow indented">
                    <span class="mi">n</span>
                    <span class="mo">=</span>
                    <span data-ieee754-value="absValue"></span>
                </span>
            </div>
        </div>

        <div class="full-equation math">
            <span class="mrow">
                <span class="mi">n</span>
                <span class="mo">=</span>
                <span class="mn" data-ieee754-value="value"></span>
            </span>
            <span class="mrow indented nowrap">
                <span class="mi">n</span>
                <span class="mo">=</span>
                <span class="mn sign-bit-any" data-ieee754-value="signHtml"></span>
                <span class="mo">&times;</span>
                (<span data-ieee754-value="significandPowers"></span>)
            </span>
            <span class="mrow indented nowrap">
                <span class="mi">n</span>
                <span class="mo">=</span>
                <span class="msup">
                    <span class="mn">&minus;1</span><span class="mn sign-bit-any" data-ieee754-value="bSign">0</span>
                </span>
                <span class="mo">&times;</span>
                <span class="msup">
                    <span class="mn">2</span><span class="mn exponent-bit-any" data-ieee754-value="exponentNormalizedZero"></span>
                </span>
                <span class="mo">&times;</span>
                (<span data-ieee754-value="significandPowersNormalized"></span>)
            </span>

            <span class="mrow indented nowrap">
                <span class="mi">n</span>
                <span class="mo">=</span>
                <span class="msup">
                    <span class="mn">&minus;1</span><span class="mn sign-bit-any" data-ieee754-value="bSign">0</span>
                </span>
                <span class="mo">&times;</span>
                <span class="msup">
                    <span class="mn">2</span><span><span class="mn exponent-bit-any" data-ieee754-value="exponentZero"></span><span class="mo">&minus;</span><span class="mn">1023</span></span>
                </span>
                <span class="mo">&times;</span>
                (<span data-ieee754-value="significandPowersNormalizedOne"></span>)
            </span>
            <span class="mrow indented nowrap">
                <span class="mi">n</span>
                <span class="mo">=</span>
                <span class="msup">
                    <span class="mn">&minus;1</span><span class="mi sign-bit-any">s</span>
                </span>
                <span class="mo">&times;</span>
                <span class="msup">
                    <span class="mn">2</span><span><span class="mi exponent-bit-any">e</span><span class="mo">&minus;</span><span class="mn">1023</span></span>
                </span>
                <span class="mo">&times;</span>
                (
                <span class="mn" data-ieee754-value="bHidden"></span>
                <span class="mo">+</span>
                <span class="significand-bit-any significand-sum">
                    <span class="msum" data-from="i = 0" data-to="51">&sum;</span>
                    <span class="msub"><span class="mi">b</span><span class="mi">52-i</span></span>
                    <span class="msup"><span class="mn">2</span><span class="mi">-i</span></span>
                </span>
                )
            </span>
        </div>
    </div>
</div>

<script src="./js/all.js"></script>

</body>
</html>
